<template>
  <view class="container">
    <z-paging ref="paging" v-model="dataList" @query="queryList">
      <block slot="top">
        <uv-navbar title="首页" placeholder leftIconSize="0" bgColor="#F86F03" :titleStyle="{'color':'#fff'}"></uv-navbar>
        <view class="notice">
          <uv-notice-bar :text="text" color="#333" bgColor="#fff"
            :customStyle="{'border-radius': '15rpx'}"></uv-notice-bar>
        </view>
        <uv-swiper :list="list" height="320rpx" :indicator="true" previousMargin="30" nextMargin="30" circular
          :autoplay="false" radius="5" bgColor="#ffffff">
        </uv-swiper>
      </block>
      <view class="main">
        <view class="nav">
          <image class="nav-img" v-for="(item, index) in classfyList" :key="index" :src="item.img" mode="aspectFill
          "></image>
        </view>
        <!-- 爆款专区 -->
        <view class="hots">
          <view class="hots-title">
            爆款专区
          </view>
          <view class="hotsGoods">
            <view class="goods-item" @click="toDetail(item)" v-for="(item, index) in dataList" :key="index">
              <image class="goodsImg" :src="item.image" mode=""></image>
              <view class="goods-info">
                <view class="goodsName text-twoline-ellipsis">
                  {{item.store_name}}
                </view>
                <view class="prices">
                  <view class="price">
                    ¥{{item.price}}
                  </view>
                  <view class="oldPrice">
                    ¥{{item.ot_price}}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        text: '',
        list: [
          'https://cdn.uviewui.com/uview/swiper/swiper3.png',
          'https://cdn.uviewui.com/uview/swiper/swiper2.png',
          'https://cdn.uviewui.com/uview/swiper/swiper1.png'
        ],
        dataList: [],
        param: {
          page: 1,
          limit: 10
        },
        classfyList: []
      }
    },
    onLoad() {
      this.getNotice();
      this.getBannerList();
      this.getClassfy();
    },
    onShow() {
      this.$nextTick(() => {
        this.$refs.paging.refresh();
      })
    },
    methods: {
      queryList(pageNo, pageSize) {
        this.param.page = pageNo;
        this.param.limit = pageSize;
        reqApi.products(this.param).then(res => {
          this.$refs.paging.complete(res.data);
        })
      },
      // 获取分类列表
      getClassfy(){
        reqApi.classfyList({}).then(res=>{
          console.log("分类列表", res);
          this.classfyList = res.data;
        })
      },
      toDetail(item) {
        uni.navigateTo({
          url: `/pages/home/goodsDetail?id=${item.id}`
        })
      },
      getNotice() {
        reqApi.notice({}).then(res => {
          console.log("消息通知", res);
          let list = res.data.map(v => v.value);
          this.text = list.join(",");
        })
      },
      getBannerList() {
        reqApi.banner({}).then(res => {
          console.log("轮播图", res);
          this.list = res.data.map(v => v.img);
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    .notice {
      padding: 28rpx;
      box-sizing: border-box;
    }

    .main {
      padding: 0 28rpx;
      box-sizing: border-box;

      .nav {
        display: flex;
        justify-content: space-between;
        margin-top: 28rpx;

        .nav-img {
          width: 340rpx;
          height: 160rpx;
        }
      }

      .hots {
        margin-top: 48rpx;

        .hots-title {
          font-weight: 500;
          font-size: 32rpx;
          color: #000000;
          margin-bottom: 16rpx;
        }

        .hotsGoods {
          display: flex;
          flex-wrap: wrap;

          .goods-item:nth-child(2n) {
            margin-right: 0;
          }

          .goods-item {
            width: 340rpx;
            background: #fff;
            border-radius: 16rpx;
            margin-right: 14rpx;
            margin-bottom: 20rpx;

            .goodsImg {
              width: 340rpx;
              height: 280rpx;
            }

            .goods-info {
              padding: 16rpx 16rpx 24rpx 16rpx;
              box-sizing: border-box;

              .goodsName {
                font-weight: 400;
                font-size: 24rpx;
                color: #000000;
              }

              .prices {
                display: flex;
                align-items: center;

                .price {
                  font-weight: 500;
                  font-size: 32rpx;
                  color: #EE1B1B;
                }

                .oldPrice {
                  font-weight: 400;
                  font-size: 20rpx;
                  color: #999999;
                  text-decoration: line-through;
                  margin-left: 10rpx;
                }
              }
            }

          }
        }
      }
    }
  }
</style>